<template>
  <div class="search-article">
    <common-header @search-article="searchArticle"></common-header>
    <div class="result-content">
      <div class="content-left"></div>
      <div class="content-list">
        <articles
          :model="'view'"
          :article-info="articleInfo"
          @page-change="pageChange"
          @load-article-by-type="loadArticleByType"
        ></articles>
      </div>
      <div class="content-others">
        <div>
          <blog-author></blog-author>
        </div>
        <div>
          <type-cloud @load-desc-type="loadArticleByType"></type-cloud>
        </div>
      </div>
      <div class="content-right"></div>
    </div>
  </div>
</template>

<script>
import CommonHeader from "@/components/layout/CommonHeader.vue";
import Articles from "@/components/Articles.vue";
import BlogAuthor from "@/components/BlogAuthor.vue";
import TypeCloud from "@/components/TypeCloud.vue";
import { api } from "@/api";
export default {
  components: { CommonHeader, Articles, BlogAuthor, TypeCloud },
  data() {
    return {
      articleInfo: {
        list: [],
        total: 0,
      },
      loading: false,
      keyWord: "",
      type: "",
    };
  },
  methods: {
    pageChange(page) {
      this.loadArticleInfoByType(null, this.keyWord, page);
    },
    searchArticle(keyWord) {
      this.keyWord = keyWord;
      this.loadArticleInfo(null, this.keyWord);
    },
    async loadArticleByType(type) {
      this.type = type;
      this.loadArticleInfoByType(null, this.type);
    },
    async loadArticleInfoByType(aid = null, type = null, page = 1) {
      this.type = type;
      try {
        this.loading = true;
        this.articleInfo = (
          await this.$axios(api.article.getArticleListByType(aid, type, page))
        ).data;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
    },
    async loadArticleInfo(aid = null, keyWord = null, page = 1) {
      this.keyWord = keyWord;
      try {
        this.loading = true;
        this.articleInfo = (
          await this.$axios(api.article.getArticleList(aid, keyWord, page))
        ).data;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
    },
  },
  mounted() {
    this.loadArticleInfo(null, this.$route.query.keyWord);
  },
};
</script>

<style lang="less" scoped>
.search-article {
  height: 100%;
  margin-top: 50px;
  .result-content {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 50px;
    background-image: url("../../assets/background-opa.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    .content-left {
      flex: 1;
      @media screen and (max-width: 800px) {
        flex: 0;
      }
    }
    .content-list {
      flex: 5;
      min-height: 100vh;
    }
    .content-others {
      flex: 2;
      @media screen and (max-width: 800px) {
        flex: 0;
      }
    }
    .content-right {
      flex: 1;
      @media screen and (max-width: 800px) {
        flex: 0;
      }
    }
  }
}
</style>
